<template>
  <div class="app-container">
    <div class="filter-container">
      <div><el-button type="primary" plain size="mini" @click="handleAdd">添加菜单</el-button></div>

      <!-- 添加一级菜单 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
        <el-form ref="form" label-width="80px" :model="form" :rules="rules">
          <el-form-item label="父级菜单" v-show="form.supResource"><el-input v-model="form.supname" readonly="readonly"></el-input></el-form-item>
          <el-form-item label="菜单名称" prop="resourceName"><el-input v-model="form.resourceName"></el-input></el-form-item>
          <el-form-item label="菜单编码" prop="code"><el-input v-model="form.code"></el-input></el-form-item>
          <el-form-item label="菜单类型" prop="resourceSort">
            <el-select v-model="form.resourceSort">
              <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="菜单图标" prop="icon"><el-input v-model="form.icon"></el-input></el-form-item>
          <el-form-item label="菜单链接" prop="resourceUrl"><el-input v-model="form.resourceUrl"></el-input></el-form-item>
          <el-form-item label="排序" prop="order"><el-input v-model="form.order"></el-input></el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddOrEdit" :loading="addrequesting">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 菜单管理 -->
      <el-table :data="tableData" style="width: 100%" row-key="id" :tree-props="{ children: 'childResources', hasChildren: 'hasChildren' }">
        <el-table-column prop="resourceName" label="名称"></el-table-column>
        <el-table-column prop="resourceNode" label="编码"></el-table-column>
        <el-table-column prop="childResources" label="上级菜单" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{JSON.stringify(scope.row.childResources)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="resourceType" label="类型" :formatter="statusFormat"></el-table-column>
        <el-table-column prop="icon" label="图标"></el-table-column>
        <el-table-column prop="resourceUrl" label="链接"></el-table-column>
        <el-table-column prop="order" label="排序"></el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClickEdit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleClickAddSub(scope.row)" type="text" size="small">添加子菜单</el-button>
            <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { list, add, update, del } from '@/api/sys/menu';
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      daterange: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      form: {},
      addrequesting: false,
      dialogTitle: '添加菜单',
      statusOptions: [
        {
          dictLabel: '菜单',
          dictValue: 'm'
        },
        {
          dictLabel: '接口',
          dictValue: 'i'
        }
      ],
      rules: {
        resourceName: [{ required: true, message: '请填写菜单名称', trigger: 'blur' }],
        code: [{ required: true, message: '请填写菜单编码', trigger: 'blur' }],
        resourceSort: [{ required: true, message: '请填写菜单类型', trigger: 'blur' }],
        icon: [{ required: true, message: '请填写菜单图标', trigger: 'blur' }],
        resourceUrl: [{ required: true, message: '请填写菜单链接', trigger: 'blur' }],
        order:[{ required: true, message: '请填写排序值', trigger: 'blur' }],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      list({}).then(res => {
        this.tableData = res.result;
        this.total = res.result.total;
        this.loading = false;
      });
    },
    // 字典状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.resourceSort);
    },
    confirmAddOrEdit() {
      // 校验
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 校验成功
          this.addrequesting = true;

          if (this.form.id != undefined) {
            this.addrequesting = false;
            update(this.form).then(res => {
              this.$message({ type: 'success', message: res.message });
              this.getList();
              this.form = {};
              this.dialogVisible = false;
              this.addrequesting = false;
            });
          } else {
            add(this.form)
              .then(res => {
                console.info(res);
                this.dialogVisible = false;
                this.addrequesting = false;
                this.$message({ type: 'success', message: res.message });
                this.getList();
                this.form = {};
              })
              .catch(() => {
                this.addrequesting = false;
              });
          }
        } else {
          return;
        }
      });
    },
    handleClickEdit(data) {
      this.form = Object.assign({}, data);
      this.dialogVisible = true;
      this.dialogTitle = '编辑菜单';
    },
    handleClickAddSub(data) {
      this.form = Object.assign({});
      this.form.supname = data.resourceName;
      this.form.supResource = data.id;
      this.dialogVisible = true;
      this.dialogTitle = '添加子级菜单';
    },
    handleAdd() {
      this.dialogVisible = true;
      this.form = {};
    },
    handleClickDelete(data) {
      this.$confirm(`确定删除${data.resourceName}？`, '删除', {
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            del({
              resourceId: data.id
            })
              .then(res => {
                instance.confirmButtonLoading = false;
                done();
                this.$message({
                  type: 'success',
                  message: res.message
                });
                this.getList();
              })
              .catch(() => {
                instance.confirmButtonLoading = false;
              });
          } else {
            done();
          }
        }
      });
    }
  }
};
</script>

<style></style>
